<template>
	<view class="content">
		<view class='withdrawcash-top'>
			<text class='withdrawcash-title'>总额（元）</text>
			<text class='withdrawcash-num'>{{ userInfo.balance }}</text>
			<view class="usdt-right" @click="hanldExchange()">充值</view>
		</view>
		<view class="gener-table" v-if="bankList.length">
			<view style="font-size: 12px;color: #999999;padding: 20px 20px 0 20px;">交易记录</view>
			<view class="gener-wapper" v-for="items in bankList">
				<view class="gener-item">
					<view class="gener-item-smlie">
						<view class="gener-smlie-one gener-cl" style="width: 60%;padding-top: 10px;">{{items.type}}</view>
						<view class="gener-smlie-one gener-mu" style="text-align: right;color: #068BF8;" v-if="items.money<0">{{items.money}}</view>
						<view class="gener-smlie-one gener-mu" style="text-align: right;color: #D62222;" v-else>+{{items.money}}</view>
						<view class="gener-smlie-one gener-hi"  style="width: 60%;">{{items.ctime}}</view>
						<view class="gener-smlie-one gener-hi" style="width: 40%;text-align: right;">单位（元）</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<view class="order-none" v-else style="text-align: center;margin-top: 100px;">
			<image class="order-none-img" src="../../../static/image/order.png" mode="" style="width: 150px;height: 150px;"></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				userInfo: {},
				platform: 'ios',
				loadStatus: 'more',
				page: 1,
				limit: 10, //每页显示几条
				bankList: [],
				userInfo: {},
				refresh: false
			}
		},
		components: {
			uniLoadMore
		},
		onShow() {
			this.getUserInfo();
		},
		onReachBottom () {
			if (this.loadStatus === 'more') {
				this.getBanklist()
			}
		},
		onLoad(){
			this.getBanklist();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.platform = res.platform;
					}
				});

				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 获取余额明细
			getBanklist() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				
				this.loadStatus = 'loading'
				
				this.$api.getBalanceList(data, res => {
					if (res.status) {
						if (this.page >= res.total) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
						this.bankList = [...this.bankList, ...res.data]
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 页面跳转
			navigateToHandle(pageUrl) {
				this.$common.navigateTo(pageUrl)
			},
			hanldExchange() {
				this.$common.navigateTo('/pages/member/balance/bankcardRecharge')
			}
		}
	}
</script>

<style>
	.withdrawcash-top {
		padding: 40upx 26upx;
		background-color: #D62222;
		color: #fff;
	}

	.withdrawcash-title {
		font-size: 28upx;
		display: block
	}

	.withdrawcash-num {
		font-size: 70upx;
		display: block;
		margin-top: 20upx;
	}

	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}

	/*修改*/
	.usdt-right {
		float: right;
		width: 73px;
		height: 34px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		text-align: center;
		position: absolute;
		right: 15px;
		top: 46px;
		font-size: 16px;
		color: rgba(214, 34, 34, 1);
		line-height: 34px;
	}

	.gener-table {
		background-color: #fff;
	}

	.gener-wapper {
		display: flex;
		flex-direction: row;
		margin: 0 20px;
	}

	.gener-item {
		width: 100%;
		height: 80px;
	}

	.gener-item-smlie {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 1px solid #F5F5F5;
	}

	.gener-smlie-one {
		height: 40px;
		line-height: 40px;
	}

	.gener-cl {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
	}

	.gener-hi {
		color: #999999;
		font-size: 13px;
	}

	.gener-mu {
		width: 40%;
		color: #D62222;
		font-weight: bold;
		padding-top: 10px;
	}
</style>
